<template>
  <div class="agritask">
    <Title title="近期农事作业情况" />
    <div class="title-con">
      <el-carousel :autoplay="true">
        <el-carousel-item v-for="(kit, indexk) in conList" :key="indexk">
          <div v-for="(itk, indexi) in kit" :key="indexi" class="hang">
            <li>
              {{ itk.execStartTime }}
              <span v-if="week(itk.execStartTime) === 1">星期一</span>
              <span v-if="week(itk.execStartTime) === 2">星期二</span>
              <span v-if="week(itk.execStartTime) === 3">星期三</span>
              <span v-if="week(itk.execStartTime) === 4">星期四</span>
              <span v-if="week(itk.execStartTime) === 5">星期五</span>
              <span v-if="week(itk.execStartTime) === 6">星期六</span>
              <span v-if="week(itk.execStartTime) === 0">星期日</span>
            </li>
            <li>{{ itk.agriculturalWorkType.agriculturalWorkTypeName }}</li>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <img
      src="~@/assets/conservation-model/lin1.png"
      class="bottom-img"
      alt=""
    />
  </div>
</template>

<script>
import Title from "@/components/Title/index";
import configurationApi from "@/api/digital-production/conservation-model/configuration/index";

export default {
  components: {
    Title
  },
  props: {
    batchNo: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      conList: [],
      taskList: []
    };
  },
  watch: {
    batchNo() {
      this.queryTask();
    }
  },
  created() {},
  methods: {
    // 查询农事任务
    queryTask() {
      this.taskList = [];
      this.conList = [];
      // let dateStart = new Date(new Date(new Date().toLocaleDateString()).getTime());
      // let start = dateStart - 2 * 31 * 24 * 60 * 60 * 1000 - 1
      // // console.log(start)
      // dateStart.setDate(1);
      // // 获取当前月的最后一天
      // var dateEnd = new Date();
      // var currentMonth = dateEnd.getMonth();
      // var nextMonth = ++currentMonth;
      // var nextMonthFirstDay = new Date(dateEnd.getFullYear(), nextMonth, 1);
      // var oneDay = 1000 * 60 * 60 * 24;
      // var end = new Date(nextMonthFirstDay - oneDay + 24 * 60 * 60 * 1000 - 1);
      // this.dateToFormattwo(end)
      if (this.batchNo) {
        configurationApi
          .queryTagriculturalTask({
            entity: {
              batchNo: this.batchNo,
              organizationNo: sessionStorage.organizationNo
            },
            // "order": "",
            page: 1,
            // "pageable": {},
            size: 5
            // "sortStr": "",
            // endTime: this.dateToFormat(end),
            // startTime: this.dateToFormat(start)
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data.content || [];
              this.taskList = data;
              this.traverList(this.taskList, 4);
              // this.$refs.agriTaskDialog.traverList(this.taskList, 4);
            } else {
              // this.$message.error("查询失败");
            }
          });
      } else {
        this.traverList(this.taskList, 4);
        // this.$refs.agriTaskDialog.traverList(this.taskList, 4);
      }
    },
    week(e) {
      let date = new Date(e);
      let today = date.getDay();
      // console.log(today)
      return today;
    },
    traverList(arr, n) {
      // 拆分数组(轮播图格式)
      var list = [];
      for (let i = 0; i < arr.length; i += n) {
        list.push(arr.slice(i, i + n));
      }
      this.conList = list;
    }
  }
};
</script>

<style lang="scss" scoped>
.agritask {
  height: 100%;
  width: 100%;

  position: relative;
  .bottom-img {
    position: absolute;
    bottom: 0;
    height: 1px;
    width: 100%;
  }
}

::v-deep .el-carousel__container {
  height: 100%;
}
::v-deep .el-carousel {
  height: 100%;
  width: 100%;
}
::v-deep .el-carousel__indicators--horizontal {
  display: none;
}

.hang {
  height: calc(28% - 16px);
  margin: 8px 0;
  padding: 0 10px;
  box-shadow: 0px 0px 32px inset rgba(24, 140, 158, 0.8);
  background: url("~@/assets/conservation-model/line.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  > li {
    list-style: none;
    color: #fff;
    font-size: 14px;
    &:nth-child(2) {
      color: rgba(5, 235, 219, 1);
    }
  }
}
</style>
